<template>
    <div class="sys-page">
        <div class="sys-search">

            <el-form :model="searchForm" :label-position="$store.labelPosition" label-width="20%">
                <el-col :xs="23" :sm="14">
                    <el-form-item label="角色名称：" >
                        <el-input v-model="searchForm.roleName" placeholder="请输入角色名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchRolesByCriteria()">查询</el-button>

                    </el-form-item>
                </el-col>
            </el-form>

            <table-mixin pagination paginationAlign="left" :paginationTotal="paginationTotal"
                         :pageChange="pageChange" :currentPage="currentPage">
                <el-table v-loading="tableData.loading" :data="tableData.body" stripe border style="width:100%">
                    <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>

                    <el-table-column label="角色名称" prop="roleName" min-width="25%"></el-table-column>
                    <el-table-column label="描述" prop="remark" min-width="35%"></el-table-column>

                    <el-table-column label="操作" class-name="centerCell" min-width="30%">
                        <template slot-scope="scope">
                            <el-button type="edit" size="small" icon="el-icon-edit"
                                       @click="gotoAddUser(scope.row.id)">添加用户</el-button>
                            <el-button type="primary" size="small" icon="el-icon-edit"
                                       @click="gotoAddRes(scope.row.id)">分配资源</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </table-mixin>


            <!-- 给角色增加用户 -->
            <el-dialog title="给角色添加用户" :visible.sync="showAssignUserDialog"
                       center width="700px">
                <div style="text-align: center">
                <el-transfer v-model="assignedUsers" :data="allUsers"
                             :titles="['未拥有', '已拥有']"
                             style="text-align: left; display: inline-block"></el-transfer>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="hideAssignUserDialog()">取 消</el-button>
                    <el-button type="primary" @click="saveAssignedUsers()">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 给角色增加用户 -->
            <el-dialog title="给角色添加资源" :visible.sync="showAssignResDialog"
                       center width="700px">
                <div style="text-align: center">
                <el-transfer v-model="assignedResources" :data="allResources"
                             :titles="['未拥有', '已拥有']"
                             style="text-align: left; display: inline-block"></el-transfer>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="hideAssignResDialog()">取 消</el-button>
                    <el-button type="primary" @click="saveAssignedRes()">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>

    export default {
        name: "role",

        data() {
            return {
                searchForm: {
                    roleName: ''
                },

                tableData: {
                    loading: true,
                    body: []
                },
                currentPage: 1,
                paginationTotal: 0,

                roleId: -1,

                //用于添加用户
                showAssignUserDialog: false,
                allUsers:[],
                assignedUsers:[],

                showAssignResDialog: false,
                allResources: [],
                assignedResources: []

            }
        },

        mounted() {
            this.searchRolesByCriteria()
        },

        methods: {
            searchRolesByCriteria(){
                this.currentPage = 1;
                this.searchRole();
            },

            // 获取table数据
            async searchRole() {
                console.log("this.currentPage: ", this.currentPage);
                let res = await this.$axios.post('/aa/role/list', {
                        pageSize: this.$store.state.pageSize,
                        pageNo: this.currentPage,
                        roleName: this.searchForm.roleName
                });

                console.log("返回角色列表：", res);
                this.tableData.loading = false;
                this.tableData.body = res.rows;
                this.paginationTotal = res.total;
            },

            pageChange(currentPage) {
                this.currentPage = currentPage;
                this.searchRole();
            },

            async gotoAddUser(roleId){
                this.roleId = roleId;
                let res = await this.$axios.get('/aa/auth/gotoAddUser2Role/' + roleId);
                this.assignedUsers = res.result.assigned.map(item => item.key);
                console.log(this.assignedUsers);
                this.allUsers = res.result.all;
                this.showAssignUserDialog = true;
            },

            hideAssignUserDialog(){
                this.showAssignUserDialog = false;
            },

            async saveAssignedUsers(){
                console.log("saveAssignedUsers()");
                console.log(this.assignedUsers);
                await this.$axios.post("/aa/auth/assignUsers2Role", {
                    roleId: this.roleId,
                    users: this.assignedUsers.join(";")
                });
                this.$myMsg.success("成功更新。");
                this.hideAssignUserDialog();
            },

            async gotoAddRes(roleId){
                this.roleId = roleId;
                let res = await this.$axios.get('/aa/auth/gotoAddRes2Role/' + roleId);
                this.assignedResources = res.result.assigned.map(item => item.key);
                console.log(this.assignedResources);
                this.allResources = res.result.all;
                this.showAssignResDialog = true;
            },

            hideAssignResDialog(){
                this.showAssignResDialog = false;
            },

            async saveAssignedRes(){
                console.log("saveAssignedRes()");
                await this.$axios.post("/aa/auth/assignRes2Role", {
                    roleId: this.roleId,
                    resources: this.assignedResources.join(";")
                });
                this.$myMsg.success("成功更新。");
                this.hideAssignResDialog();
            }
        }

    }
</script>

